import React, { Component } from 'react';
import { Collapse, Form, Col, Row, Input, Select, DatePicker, Modal, Icon, Button } from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import styles from '@/pages/Operate.less';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import AntdUpload from '@/components/AntdUpload';
import prompt from '@/components/Prompt';
import SearchSelect from '@/components/SearchSelect';
import { columnsEtcCard, getNowFormatDate } from '@/pages/Common/common';
import FileReader from '@/components/FileReader';
import { queryFileList, filterAddFile, filterDeteteFile } from '@/utils/common';
const dateFormat = 'YYYY-MM-DD HH:mm';
const Panel = Collapse.Panel;
const { TextArea } = Input;
const { Option } = Select;
// let selectEtcList = '';

@connect(({ manageEtc, common }) => ({
  manageEtc,
  dictObject: common.dictObject,
}))
@Form.create()
export default class ETCOperate extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeKey: ['1'],
      fileList: [],
      etcCards: [],
      ownCompany: '',
      carInfo: {},
    };
    this.paneSize = ['1'];
    this.fileList = [];
  }
  componentDidMount() {
    this.props.onRef(this);
    // 查询字典：
    //币种：
    this.props.dispatch({
      type: 'common/querytDictByCode',
      payload: { code: 'currency-type' },
    });
  }
  getETCList = (params = {}) => {
    this.props.dispatch({
      type: 'manageEtc/ETCList',
      payload: params,
    });
  };
  getValue = values => {
    this.setState({
      etcCards: values,
      carInfo: values[0],
    });
  };

  // 添加 或 编辑操作
  operatePaneButton = () => {
    const { dispatch, form, checkId, type, cardNo, rowDetails } = this.props;
    const { fileList, cars, carInfo, etcCards } = this.state;
    const ectCard = type == 'modal' ? rowDetails : carInfo;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const { exportTime, etcId, fileTokens, ...value } = values;

        if (exportTime) {
          value.exportTime = moment(exportTime).format(dateFormat);
        }
        value.fileTokens = filterAddFile(fileTokens);
        value.deleteFileIds = filterDeteteFile(fileTokens, this.fileList);
        value.etcId = ectCard.etcId || ectCard.id;
        value.etcNo = ectCard.etcNo || ectCard.cardNo;
        value.vehicleId = ectCard.vehicleId;
        dispatch({
          type: 'manageEtc/rechange',
          payload: value,
          callback: () => {
            this.fileList = [];
            this.setState({
              fileList: [],
              carInfo: {},
              etcCards: [],
            });
            this.getETCList();
            if (type == 'modal') {
              this.props.pfn('false');
            }
            form.resetFields();
          },
        });
      }
    });
  };

  render() {
    const {
      list,
      type,
      form: { getFieldDecorator },
      location,
      manageEtc: { ETCList },
      loading,
      match,
      dictObject,
      checkId,
      cardNo,
      rowDetails,
    } = this.props;

    const { id, activeKey, fileList, cars, ownCompany, carInfo, etcCards } = this.state;
    const hasCardNo = type == 'modal' ? true : false;
    const _etcCards = hasCardNo ? [{ id: rowDetails.id }] : etcCards;
    const _carInfo = hasCardNo ? rowDetails : carInfo;

    const _gutter = type == 'modal' ? { md: 4, lg: 12, xl: 24 } : { md: 8, lg: 24, xl: 48 };
    const _col = { md: 12, sm: 24 };
    const _row = { md: 24 };
    const prefixSelector = getFieldDecorator('currencyType', {
      initialValue: 'CNY',
    })(
      <Select style={{ width: 90 }}>
        {dictObject['currency-type'] &&
          dictObject['currency-type'].map(item => <Option key={item.code}>{item.value}</Option>)}
      </Select>
    );
    return (
      <div className={styles.tableListForm}>
        <Form layout="inline">
          <Row gutter={_gutter}>
            <Col {..._col}>
              <Form.Item label="卡号">
                {getFieldDecorator('etcId', {
                  rules: [{ required: true, message: '请选择' }],
                  initialValue: _etcCards,
                })(
                  <SearchSelect
                    dataUrl="tms/tms-etc/selectList"
                    url="tms/tms-etc/viewDetails" // selectedData只只有id时需要传url
                    selectedData={_etcCards} // 选中值
                    multiple={false} // 是否多选
                    showValue="cardNo"
                    searchName="keyWord"
                    columns={columnsEtcCard} // 表格展示列
                    onChange={this.getValue} // 获取选中值
                    scrollX={500}
                    id="etcList2"
                    disabled={hasCardNo}
                  />
                )}
              </Form.Item>
            </Col>
            <Col {..._col}>
              <Form.Item label="充值时间">
                {getFieldDecorator('exportTime', {
                  rules: [{ required: true, message: '请选择' }],
                  initialValue: moment(getNowFormatDate(), dateFormat),
                })(<DatePicker style={{ width: '100%' }} showTime format={dateFormat} />)}
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={_gutter}>
            <Col {..._col}>
              <Form.Item label="车牌号">
                {getFieldDecorator('vehicleId', {
                  rules: [{ required: true, message: '请输入' }],
                  initialValue: _carInfo.cartPlateNo,
                })(<Input placeholder="请输入" disabled={true} />)}
              </Form.Item>
            </Col>
            <Col {..._col}>
              <Form.Item label="所属公司">
                {getFieldDecorator('ownCompanyName', {
                  initialValue: _carInfo.ownCompanyName,
                })(<Input placeholder="请输入" disabled={true} />)}
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={_gutter}>
            <Col {..._col}>
              <Form.Item label="充值地点">
                {getFieldDecorator('exportStation', {
                  rules: [{ required: true, message: '请选择' }],
                })(<Input placeholder="请输入" />)}
              </Form.Item>
            </Col>
            <Col {..._col}>
              <Form.Item label="充值金额">
                {getFieldDecorator('changeMoney', {
                  rules: [{ required: true, message: '请选择' }],
                })(
                  <Input
                    placeholder="请输入"
                    addonBefore={prefixSelector}
                    style={{ width: '100%' }}
                  />
                )}
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={_gutter}>
            <Col {..._row}>
              <Form.Item label="备注">
                {getFieldDecorator('remarks', {})(<TextArea placeholder="请输入" rows={4} />)}
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={_gutter}>
            <Col {..._row}>
              <Form.Item label="票据">
                {getFieldDecorator('fileTokens')(<FileReader urlType="tms" />)}
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </div>
    );
  }
}
